<template>
  <div class="form-layout">
    <!--左侧导航-->
    <div class="nav-left">
      <customAnchor :itemList="[{ name: 'box-base', title: '基础信息' }]" />
    </div>
    <!--表单区域-->
    <div class="form-right" ref="formRight">
      <customForm :data="form" :rules="propRules" ref="editForm" :disabled="propReadonly">
        <template #content>
          <div id="box-base" class="box-title">基础信息</div>
          <customFormItem
            label="参数组"
            name="groupKey"
            :parent="_self"
            :form="form"
            :type="constCommon.formItemType.selectStatic.name"
            :config="{ options: propDictionaries['groupKey'] }"
            full-width
          />
          <customFormItem
            label="参数标识"
            name="paramKey"
            :parent="_self"
            :form="form"
            @change="afterParameterChange()"
            full-width
          />
          <customFormItem label="参数名称" name="name" :parent="_self" :form="form" full-width/>
          <customFormItem label="参数值" name="value" :parent="_self" :form="form" full-width
                          :type="constCommon.formItemType.textarea.name" full-width
                          :config="{maxlength: 1000, autosize: true, minRows: 3, maxRows: 10}"
          />
          <customFormItem label="备注" name="remark" :parent="_self" :form="form"
              :type="constCommon.formItemType.textarea.name" full-width
              :config="{maxlength: 1000, autosize: true, minRows: 3, maxRows: 10}"/>
        </template>
      </customForm>
    </div>
  </div>
</template>

<script>
/* eslint-disable*/
import customAnchor from '@/components/custom/form/customAnchor.vue'
import parameterConfig from '@/util/const/parameterConfig.js'

export default {
  data() {
    return {
      form: {},
      viewData: {},
      fileName: 1111,
      tableData: [],
      searchedList: [],
      columns: [],
      valueData: {},
      rowDataName: '',
      rowDataLabel: '',
      inputType: '',
      windowHeight: window.innerHeight,
      parameterConfig: {},
      searchValue: '',
    }
  },
  created() {
    this.$emit('event-register', {
      validate: (callback) => {
        return this.$refs.editForm.validate(callback)
      },
      beforeSave: () => {
        this.$emit('data-callback', this.form)
        this.initValueFromTableData()
        return true
      },
      afterMove: (formData, initData) => {
        this.form = global.utils.jsonClone(formData)
        /*eslint-disable 下面赋值操作文件上传组件必须*/
        this.$set(this.form, 'id', this.form.id)
        this.afterParameterChange()
      },
      afterSave: () => {
        // 用作返回自动主键
        // this.form[this.propPrimaryKey] = this.propViewFormData[this.propPrimaryKey]
      },
      beforeDelete: () => {
        return true
      },
      afterDelete: () => {},
      beforeFlow: (flowButtonKey) => {
        return true
      },
      afterFlow: (flowButtonKey) => {},
      beforeClose: () => {
        return true
      },
    })
  },
  props: {
    propParent: Object,
    propInitData: Object,
    propPrimaryKey: String,
    propDictionaries: Object,
    propCurrentRow: Object,
    propViewFormData: Object,
    propReadonly: Boolean,
    propStatus: String,
    propRules: Object,
  },
  components: {
    customAnchor,
  },
  computed: {},
  methods: {
    //参数值变化后
    async afterParameterChange() {
      if (parameterConfig[this.form.paramKey]) {
        let rowDataDict = parameterConfig[this.form.paramKey].rowDataDict
        let rowDatafun = parameterConfig[this.form.paramKey].rowDatafun
        this.rowDataName = parameterConfig[this.form.paramKey].rowDataName
        this.rowDataLabel = parameterConfig[this.form.paramKey].rowDataLabel
        let rowDataNameTmp = this.rowDataName

        this.columns = parameterConfig[this.form.paramKey].columns

        this.columns.push({
          pkname: 'name',
          label: '属性名',
          hide: true,
        })
        this.inputType = parameterConfig[this.form.paramKey].inputType
        this.parameterConfig = parameterConfig[this.form.paramKey]

        this.initTableDataFromValue()
        if (rowDataDict) {
          //使用的数据字典
          //数据字典长度发生了变化
          if (this.tableData.length < 1 || this.tableData.length != this.utils.getDictDataList(rowDataDict).length) {
            this.tableData = []
            this.utils.getDictDataList(rowDataDict).forEach((dict) => {
              let rowData = {}
              rowData[rowDataNameTmp] = dict.label
              rowData.pkname = dict.value
              rowData.pktext = dict.label
              this.tableData.push(rowData)
            })
            this.searchedList = this.tableData
          }
        } else if (rowDatafun) {
          //使用的数据方法
          //数据字典长度发生了变化
          let tableData = await rowDatafun(this)
          if (this.tableData.length < 1 || this.tableData.length != tableData.length) {
            this.tableData = tableData
            this.searchedList = this.tableData
          }
        }
      } else {
        this.inputType = ''
      }
    },
    //从 form.value 解析 参数
    initTableDataFromValue() {
      if (this.form.value) {
        if (this.utils.isJSON(this.form.value)) {
          this.tableData = this.utils.str2json(this.form.value)
          this.searchedList = this.tableData
        }
      }
    },

    //从 tableData 解析 参数 到 form.value
    initValueFromTableData() {
      if (this.inputType == 'table') {
        this.$set(this.form, 'value', this.utils.json2str(this.tableData))
      }
    },

    //获取行数据数据字典
    getRowDataDict(column, rowData) {
      if (!column.dictDataFun) return []
      return column.dictDataFun(column, rowData, this)
    },
  },
  watch: {
    //参数变化后，进行初始化
    form: {
      handler(newValue, oldValue) {
        if (newValue.paramKey && newValue.value != oldValue.value) {
          // this.initTableDataFromValue()
        }
      },
      deep: true,
      immediate: true,
    },
  },
}
</script>
